<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
    <!-- <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <p>总设备数</p>
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>在线数</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

            </div>
            <p>掉线数</p>
        </li>
        <li class="user_Overview-item" style="color: #f5023d">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>告警次数</p>
        </li>
    </ul> -->
    <Echart id="leftTop" :options="options" class="" v-if="pageflag" ref="charts" />
    <Reacquire v-else @onclick="getData" line-height="200px">
        重新获取{{ getCode }}
    </Reacquire>
</template>

<script>
import * as API from "@/api/api";
export default {
  data() {
    return {
      options: {},
      totalNum: 0,
      pieData: [],
      pageflag: true,
      timer: null,
      colors: ["#ECA444", "#33A1DB", "#56B557"],
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    this.clearData()

  },
  computed: {
    getAdcode() {
      return this.$store.state.adcode;
    }
  },
  watch: {
    getAdcode(newAdcode,oldValue) {
      // 点击地图，更新数据
      this.pieData = [];
      this.totalNum = 0;
      this.getData(newAdcode);
    }
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    async getData(adcode = 0) {
      this.pageflag = true;
      const res = await API.GET('/traffic/gender',{adcode: adcode});
      if (res.code == '0') {
          if (res.data != null) {
            res.data.forEach((item,key) => {
              this.totalNum += item.value;
              this.pieData.push({
                'name': item.name,
                'value': item.value,
                label: {
                  shadowColor: this.colors[key] != undefined ? this.colors[key] : this.colors[2],
                },
              });
            });
          }
      }
      this.init();
      // this.pageflag =false

    //   currentGET('big1').then(res => {
    //     //只打印一次
    //     if (!this.timer) {
    //       console.log("设备总览", res);
    //     }
    //     if (res.success) {
        //   this.countUserNumData = res.data
        //   this.$nextTick(() => {
            //this.init()
        //   })

        // } else {
        //   this.pageflag = false
        //   this.$Message({
        //     text: res.msg,
        //     type: 'warning'
        //   })
        // }
    //   })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      let myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      });
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
      });
    },
    init() {
      let total = this.totalNum;
      let piedata = {
        name: "性别统计",
        type: "pie",
        radius: ["42%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },
        color: this.colors,
        data: this.pieData
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: "{b|{b}}\n{c|{c}个}\n{per|{d}%}",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,
            
            },
              emphasis: {
                show: true,
              },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>